<template>
  <div class="localHistoricalTrack">
    <div class="handle rightHandle" v-show="rightVisible" @click="clickRight">
      <a-icon class="close-icon" type="left" title="展开" />
    </div>
    <map-draw ref="mapDrawId" />
    <div class="spin_box">
      <a-spin :spinning="isLoading" tip="正在查询中..." size="large" />
    </div>
    <div class="q-button-box">
      <div class="q-collapse-box">
        <a-collapse defaultActiveKey="1">
          <a-collapse-panel key="1" header="目标选择">
            <TargetList @clickRow="onClickRow" ref="targetListId" @querySuccess="onQuerySuccess" />
          </a-collapse-panel>
        </a-collapse>
      </div>
    </div>
    <information-model v-show="informationShow" @close="informationClose" ref="infoDrawer"></information-model>
  </div>
</template>
<script>
import TargetList from './components/targetList'
import informationModel from './components/information_model'
import * as api from '@/api/wxSmuggle/eventModel.js'
import mapDraw from '../../modules/mapDraw'

export default {
  components: { TargetList, informationModel, mapDraw },
  data() {
    return {
      isLoading: false,
      informationShow: false,
      pointList: [],
      rightVisible: false,
      taskId: '',
      modelId: ''
    }
  },
  watch: {
    $route(data) {
      this.getRouteQuery(data)
    }
  },
  mounted() {
    this.getRouteQuery(this.$route)
  },
  methods: {
    // 监听路由变化
    getRouteQuery($route) {
      if ($route.query && Object.keys($route.query).length > 0) {
        let query = $route.query
        this.taskId = query.taskId
        this.modelId = query.modelId
        let str = query.isOperation.toString()
        if (str == 'true') {
          this.$refs.targetListId.setOperation(true, query.taskId) //发起人
        } else {
          this.$refs.targetListId.setOperation(false, query.taskId) //审批人
        }
        this.informationShow = false
        this.$refs.mapDrawId.removeOverlay()
      }
    },
    onClickRow(row) {
      console.log(row)
      this.informationShow = true
      this.rightVisible = false
      this.$refs.infoDrawer.listLoading = true
      this.isLoading = true
      api
        .queryDetailByPhone({ taskId: this.taskId, modelId: this.modelId, queryId: row.queryId })
        .then(res => {
          console.log('res===', res)
          if (res.success) {
            //过滤空的经纬度
            // let resultArr = res.result.filter(item => item.longitude != '' && item.latitude != '')
            // this.$refs.infoDrawer.getData(row, resultArr)
            // this.pointList = resultArr
            this.$refs.infoDrawer.getData(row, res.result)
            this.pointList = res.result
            // 绘制轨迹
            if (this.pointList.length > 0) {
              let position = []
              let list = this.pointList.map((item, index) => {
                return {
                  key: index,
                  latitude: item.latitude,
                  longitude: item.longitude,
                  appearTime: item.appeartime,
                  address: item.address
                }
              })
              position.push({ list })
              this.$nextTick(() => {
                this.$refs.mapDrawId.drawTaskDetailsDrawer(position)
              })
            } else {
              this.$refs.mapDrawId.removeOverlay()
            }
          } else {
            this.$message.warning(res.message)
          }
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
        .finally(() => {
          this.$refs.infoDrawer.listLoading = false
          this.isLoading = false
        })
    },
    onQuerySuccess() {
      // console.log('dfksfjsd')
    },
    informationClose() {
      this.informationShow = false
      this.rightVisible = true
    },
    clickRight() {
      this.rightVisible = false
      this.informationShow = true
    }
  }
}
</script>
<style lang="less" scoped>
.spin_box {
  position: absolute;
  top: 200px;
  left: 50%;
  z-index: 999;
}
.localHistoricalTrack {
  position: relative;
  left: -10px;
  right: 0;
  top: -10px;
  bottom: 0;
  z-index: 800;
  overflow: hidden;
  transition: all 0.3s;
  background-color: #f7f7f7;
  /deep/span.BMap_Marker {
    img {
      display: none !important;
    }
  }
  .map-q {
    position: relative;
    width: 100%;
    height: 837px;
    overflow: hidden;
  }
  .q-button-box {
    position: absolute;
    left: 6px;
    top: 0;
    // z-index: 5;
    padding: 15px;
    // cursor: pointer;
    display: flex;
    .q-collapse-box {
      width: 650px;
    }
  }
  .map-slider {
    z-index: 999;
    position: absolute;
    left: 0px;
    bottom: 20px;
    padding: 10px 30px;
    box-sizing: border-box;
    width: 100%;
    .map-slider-r {
      margin-left: 175px;
    }
  }
  .sign-main {
    width: 380px;
    height: 330px;
    background: #ffffff;
    border-radius: 5px;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 100;
    .information_header {
      height: 45px;
      box-sizing: border-box;
      padding: 10px 20px;
      font-size: 14px;
      border-bottom: 1px solid #eeeeee;
      background-color: #fafafa;
      font-weight: 600;
      .close_icon {
        display: block;
        width: 100%;
        text-align: right;
        font-size: 36px;
        margin-top: -20px;
        span {
          cursor: pointer;
        }
      }
    }
    .information_title {
      line-height: 25px;
      font-size: 14px;
      overflow: hidden;
      margin: 10px 0 10px 15px;
      .information_title_span {
        float: left;
        width: 5px;
        height: 25px;
        background-color: blue;
        margin-right: 10px;
        margin-left: 5px;
      }
    }
    .information_main {
      margin: 15px 0 10px 15px;
      .information_main_row {
        margin-top: 15px;
      }
    }
  }
}
.localHistorical-dropdown-menu {
  background-color: #1890ff;
  border-color: #1890ff;
  .ant-dropdown-menu-submenu-title,
  .ant-dropdown-menu-item {
    color: #fff;
  }
  .ant-dropdown-menu-item:hover,
  .ant-dropdown-menu-submenu-title:hover {
    background-color: rgba(24, 14, 255, 0.1);
  }
}
.handle {
  position: absolute;
  display: inline-block;
  top: 0;
  z-index: 10;
  background: rgba(0, 0, 0, 0.6);
  height: 100%;
  cursor: pointer;
  transition: 0.5s;
  display: flex;
  flex-direction: column;
  justify-content: center;
  .close-icon {
    font-size: 20px;
    color: #fff;
  }
  &.rightHandle {
    right: 0;
  }
}
.sign_text {
  width: 30px;
  display: inline-block;
  text-align: center;
  position: absolute;
  top: -20px;
  color: #fff;
}
</style>
<style>
.sign {
  cursor: pointer;
}
.arrow-num {
  opacity: 0.6;
  border-radius: 10%;
  background: red;
  color: #ffffff;
  line-height: 30px;
  padding: 0 8px;
  position: absolute;
  top: -32px;
  left: -25px;
}
</style>
